<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/header.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DSP</title>
<%@include file="../common/link.jsp"%>
<script src="js/dsp.js"></script>
<script src="javascript?type=province"></script>
<script src="javascript?type=item"></script>
<script src="javascript?type=selectTags"></script>
<script>
	var config = {
		url : 'personal_accounts'
	}
	var colModel = [ {
		title : "省",
		field : 'province',
		width : 80,
		formatter: function(cell , row , dataIndex){
			return "<a href='#' onclick='javascript:DSP.update("+row.id+")'>"+province[cell] +"</a>";
		}
	}, {
		title : "城市",
		field : 'city',
		width : 80,
		formatter: function(cell , row , dataIndex){
			return province[cell];
		}
	}, {
		title : "区",
		field : 'area',
		width : 80,
		formatter: function(cell , row , dataIndex){
			return province[cell];
		}
	},{
		title : '户口性质' , 
		field : 'hukou',
		width: 80,
		formatter: function(cell , row , dataIndex){
			return selectTags["hukou_"+cell];
		}
	},{
		title : '保险项目',
		field : 'itemId',
		width: 80,
		formatter: function(cell , row , dataIndex){
			return item[cell];
		}
	},{
		title : '扣款方式' , 
		field : 'personalType',
		width: 80,
		formatter: function(cell , row , dataIndex){
			return selectTags["rate_"+cell];
		}
	},{
		title : '定值' , 
		field : 'fixValue',
		width: 80
	},{
		title : '百分比' , 
		field : 'rate',
		width: 80
	},{
		title : '支付下限' , 
		field : 'personalLower',
		width: 80
	},{
		title : '支付上限' , 
		field : 'personalLimit',
		width: 80
	},{
		title : '精确度' , 
		field : 'personalRound',
		width: 80,
		formatter: function(cell , row , dataIndex){
			return selectTags["round_"+cell];
		}
	}];
	
	function CallBackFunc(){
		$("#personalType").attr("value","");
		$("#tr_fixValue").css('display','none');
		$("#tr_rate").css('display','');
	}
	function update(data) {
		DSP.city(data.province, data.city);
		DSP.area(data.city, data.area);
		$_("id").value = data.id;
		$_("province").value = data.province;
		$_("city").value = data.city;
		$_("area").value = data.area;
		$_("fixValue").value = data.fixValue;
		$_("rate").value = data.rate;
		$_("personalType").value = data.personalType;
		$_("personalLower").value= data.personalLower;
		$_("personalLimit").value= data.personalLimit;
		$_("itemId").value = data.itemId;
		
		//$("#id").attr("value", data.id);
		//$("#province").attr("value", data.province);
		//$("#city").attr("value", data.city);
		//$("#area").attr("value", data.area);
		//$("#fixValue").attr("value",data.fixValue);
		//$("#rate").attr("value",data.rate);
		//$("#personalType").attr("value",data.personalType);
		//$("#personalLower").attr("value",data.personalLower);
		//$("#personalLimit").attr("value",data.personalLimit);
		//$("#personalRound").attr("value",data.personalRound);
		//$("#hukou").attr("vallue",data.hukou);
		DSP.setRadio('hukou',data.hukou);
		DSP.setRadio('personalRound',data.personalRound);
		//$("#itemId").attr("value",data.itemId);
		showCompanyType();
	}
	function showCompanyType(){
		if($("#personalType").val() == 1){
			$("#tr_fixValue").css('display','none');
			$("#tr_rate").css('display','');
		} else {
			$("#tr_fixValue").css('display','');
			$("#tr_rate").css('display','none');
		}
	}
	/**
	* 判断百分比或定值是否必输
	*/
	function checkValue(val , index){
		//index == 1 百分比 ; ==2 定值
		if ($("#personalType").val() == index){
			if(val == '') {
				return '不能为空';
			} 
		}
		return '';
	}
</script>
</head>
<body>
<form id="qForm">
		<script>
			$(function(){
					DSP.province("#q_province");
					$("#q_province").change(function(){
							$("#q_city").empty().append("<option value=''>请选择市</option>");
							$("#q_area").empty().append("<option value=''>请选择区</option>");
							var item = $("#q_province").val();
							if(item != ''){ 
								DSP.city(item,false,"#q_city");
							}
							DSP.grid.query('',true);
					});
					$("#q_city").change(function(){
						$("#q_area").empty().append("<option value=''>请选择区</option>");
						var item = $("#q_city").val();
						if(item !=''){
							DSP.area(item,false,"#q_area");
						}
						DSP.grid.query('',true);
					});
					DSP.item("#q_itemId");
					$("#q-form select").change(function(event){
						DSP.grid.query('',true);
					}) 
			});	
		</script>
		<table width="60%" cellspacing="3" cellpadding="3"
			bordercolor="#DEDEDC" border="0" id="q-form" >
			<tr>
				<th width="15%" class="td_left" valign="middle">省:</th>
				<td width="20%"><select id="q_province" name="q_province" ></select>
				</td>
				<th width="15%" class="td_left" valign="middle">市:</th>
				<td width="20%"><select id="q_city" name="q_city"><option value=''>请选择市</option></select>
				</td>
			</tr>
			<tr>
				<th width="15%" class="td_left" valign="middle">区:</th>
				<td><select id="q_area" name="q_area"><option value=''>请选择区</option></select>
				</td>
				<th class="td_left" valign="middle">户口性质:</th>
				<td><dsp:selectTag htmlId="q_hukou" tagId="hukou"  isAll="true" />
				</td>
			</tr>
			<tr>
				<th width="10%" class="td_left" valign="middle">保险项目:</th>
				<td><select name="q_itemId" id="q_itemId" ></select>
				</td>
				<th class="td_left" valign="middle">扣款方式:</th>
				<td><dsp:selectTag htmlId="q_companyType" tagId="rate"  isAll="true" />
				</td>
			</tr>
		</table>
		</form>
	<table id="xDataGrid"></table>
			<script type="text/javascript">
				$(function() {
					DSP.open(false,520 , 600 ,"");
					DSP.grid(colModel, false, null , "社保配置信息-个人");
					DSP.province();
					$("#province").change(
							function() {
								$("#city").empty().append(
										"<option value=''>请选择市</option>");
								$("#area").empty().append(
										"<option value=''>请选择区</option>");
								var item = $("#province").val();
								if(item != ''){
									DSP.city(item);
								}
							});
					$("#city").change(function(){
						$("#area").empty().append("<option value=''>请选择区</option>");
						var item = $("#city").val();
						DSP.area(item);
					});
					$("#personalType").change(function(){
						showCompanyType();
					});
					DSP.item("#itemId");
				});
			</script>
	<div id="dialog_div" class="easyui-window" title="社保配置信息-公司"
		collapsible="false" minimizable="false" maximizable="false"
		icon="icon-save"
		style="width: 310px; height: 600px; left: 200px; top: 10px; padding: 5px; background: #fafafa;">
		<div class="easyui-layout" fit="true">
			<div region="center" border="false"
				style="padding: 10px; background: #fff; border: 1px solid #ccc;">
				<form action="" id="form1">
					<input type="hidden" name="id" id="id"value="" />
					<table width="100%" cellspacing="3" cellpadding="3"
						bordercolor="#DEDEDC" border="0" id="id-form">
							<tr>
								<th class="td_right" valign="middle">省份:</th>
								<td><select id="province" name="province" jval="{valid:function(val){ if (val.length == 0){  return '不能为空'; } else {  return '';}}}"></select>
								 <select id="city" name="city" jval="{valid:function(val){ if (val.length == 0){  return '不能为空'; } else {  return '';}}}"><option value="">请选择市</option></select>
							 	 <select id="area" name="area" jval="{valid:function(val){ if (val.length == 0){  return '不能为空'; } else {  return '';}}}"><option value="">请选择区</option></select>
								</td>
							</tr>
							<tr>
								<th class="td_right" valign="middle">户口性质:</th>
								<td><dsp:radioTag htmlId="hukou" tagId="hukou" htmlValue="" />
								</td>
							</tr>
							<tr>
								<th class="td_right" valign="middle">保险项目:</th>
								<td><select id="itemId" name="itemId" jval="{valid:function(val){ if (val.length == 0){  return '不能为空'; } else {  return '';}}}">
								<option value="">请选择保险项目</option>
								</select>
								</td>
							</tr>
							<tr>
								<th class="td_right" valign="middle">扣款方式:</th>
								<td><dsp:selectTag htmlId="personalType" tagId="rate" />
								</td>
							</tr>
							<tr id="tr_fixValue" style="title : none;">
								<th class="td_right" valign="middle">定值:</th>
								<td><input type="text" name="fixValue" id="fixValue" 
								jval="{valid:function(val){ return checkValue(val,2); }}"
								jValKey="{valid:/[0-9.]/,message:'只能输入数字型', styleType:'cover'}"  />
								</td>
							</tr>
							<tr id="tr_rate">
								<th class="td_right" valign="middle">百分比:</th>
								<td><input type="text" name="rate" id="rate" value="" 
										jval="{valid:function(val){ return checkValue(val,1); }}"
										jValKey="{valid:/[0-9.]/,message:'只能输入数字型', styleType:'cover'}"  />
								</td>
							</tr>
							<tr>
								<th class="td_right" valign="middle">支付下限:</th>
								<td><input type="text" name="personalLower" id="personalLower" value="" />
								</td>
							</tr>
							<tr>
								<th class="td_right" valign="middle">支付上限:</th>
								<td><input type="text" name="personalLimit" id="personalLimit" value="" />
								</td>
							</tr>
							<tr>
								<th class="td_right" valign="middle">精确度:</th>
								<td><dsp:radioTag htmlId="personalRound" tagId="round" htmlValue="" />
								</td>
							</tr>
					</table>
				</form>
			</div>
			<div region="south" border="false"
				style="text-align: right; height: 30px; line-height: 30px;">
				<a id="btnEp" class="easyui-linkbutton" icon="icon-ok"
					href="javascript:DSP.send();"> 确定</a> <a id="btnCancel"
					class="easyui-linkbutton" icon="icon-cancel"
					href="javascript:DSP.close();">取消</a>
			</div>
		</div>
	</div>
</body>
</html>
